/*
 * @Author: Leo Zhang（张吉军）
 * @Description:
 * @需求文档：
 * 高保真：
 * API：
 */

import React, { useEffect, useState } from "react";
import { Link, Outlet } from "react-router-dom";
import { Input, Select, Carousel, Card, Spin } from "antd";
import { useNavigate } from "react-router-dom";
import moment from "moment";
// import { CustomerApi } from '@/src/api/strapi';
import baseService from "@service/baseService";
import fireUrl from "@assets/fire.png";
import testUrl from "@assets/test.png";
import styles from "./style.module.less";
// import banner_lianhuanhua from "@assets/banner_lianhuanhua.jpg";
// import banner_wenxian from "@assets/banner_wenxian.jpg";
import { appKey } from "../../constant/index";

// import './demo.css';
// import './component.css';
// import * as  anime from './js/anime.min.js'

const { Search } = Input;

const handlePathstr = (path) => {
  return path?.replace(
    "https://edu-platform-file.oss-cn-hangzhou.aliyuncs.com",
    "/mine"
  );
};

const Home = (props) => {
  const [hotModule, setHotModule] = useState([]);
  const [allSubjectInfo, setAllSubjectInfo] = useState([]);
  const navigate = useNavigate();
  const [courseList, setCourseList] = useState([]);
  const isFirstShow = sessionStorage.getItem("isFirstOpen");
  const [pageLoading, setPageLoading] = useState(false);

  const banner_lianhuanhua =
    "https://edu-platform-file.oss-cn-hangzhou.aliyuncs.com/%E5%BE%AE%E4%BF%A1%E5%9B%BE%E7%89%87_20240628215428.jpg";
  const banner_wenxian =
    "https://edu-platform-file.oss-cn-hangzhou.aliyuncs.com/%E5%BE%AE%E4%BF%A1%E5%9B%BE%E7%89%87_20240628215418.jpg";

  useEffect(() => {
    // 全部科目
    getAllSubjectList();
    handleSubjectList();
  }, []);

  const handleSubjectList = async () => {
    try {
      await baseService.get("/edu/subject/list").then((res: any) => {
        if (res.code == 0) {
          setCourseList(res.data);
        }
      });
    } catch (error) {
      console.log("jj-error", error);
    }
  };

  const getAllSubjectList = () => {
    try {
      setPageLoading(true);
      baseService
        .get(`/edu/subject/file/list`)
        .then((res) => {
          if (res.code == 0) {
            setAllSubjectInfo(res?.data);
          }
        })
        .finally(() => {
          setPageLoading(false);
        });
    } catch (error) {}
  };

  const handleTabClick = (nav, idx) => {
    if (nav.name == "首页") {
      navigate("/");
      return;
    }

    navigate(`/subjectList?name=${nav.name}&idx=${idx}`);
  };

  const viewDetail = (item) => {
    const videoUrl = `${handlePathstr(item?.fileUrl)}`;
    try {
      baseService.put(`/edu/subject/file/2/${item.id}/count`);
    } catch (error) {}
    navigate("/acticleDetail", { state: { item, videoUrl } });
  };

  return (
    <>
      <div className={styles.bannerWrapper}>
        <Card title="" className={styles.cardWrap}>
          <Carousel dots={false}>
            <img
              src={
                appKey === "LIAN_HUAN_HUA" ? banner_lianhuanhua : banner_wenxian
              }
            />
          </Carousel>
        </Card>
        <div className={styles.recommandList}>
          <h5 style={{ marginBottom: "0", marginLeft: "20px" }}>热门下载</h5>
          <div className={styles.recommands}>
            {hotModule?.slice(0, 7)?.map((nav, idx) => {
              return (
                <div
                  className={styles.textWrapper}
                  onClick={() => viewDetail(nav)}
                >
                  <img src={fireUrl} className={styles.hotUrl} alt="" />
                  <span className={styles.txt}>
                    {nav.title?.replace(/\.(mp4|pdf|mp3)$/i, "")}
                  </span>
                </div>
              );
            })}
          </div>
        </div>
      </div>
      <div className={styles.sourceWrapper}>
        <div className={styles.title}>必备资源</div>
        <div className={styles.sourceList}>
          {courseList?.map((item: any, index: any) => {
            return (
              <Card
                title={item.name}
                key={index}
                extra={
                  <a onClick={() => handleTabClick(item, index + 1)}>更多</a>
                }
                style={{
                  marginLeft: index % 2 === 0 ? 0 : "10px",
                  marginRight: index % 2 === 0 ? "10px" : 0,
                }}
                className={styles.recordItem}
              >
                {allSubjectInfo
                  ?.filter((all: any) => all.subjectId == item.id)
                  ?.map((sub: any, idx) => {
                    return (
                      <div
                        key={idx}
                        className={styles.record}
                        onClick={() => viewDetail(sub)}
                      >
                        <img src={testUrl} className={styles.testIcon} />
                        <span className={styles.testTxt}>
                          {sub.title?.replace(/\.(mp4|pdf|mp3)$/i, "")}
                        </span>
                        <span className={styles.time}>
                          [{moment(sub.createDate).format("YYYY-MM-DD")}]
                        </span>
                      </div>
                    );
                  })}
              </Card>
            );
          })}
        </div>
      </div>
      <Spin size="large" spinning={pageLoading} fullscreen />
    </>
  );
};

export default Home;
